<template>
  <div>
    <detail-banner
    :sightname="sightname"
    :bannerimg="bannerimg"
    :bannergallary="bannergallary"
    >
    </detail-banner>
    <detail-header></detail-header>
    <div class="content">
      <detail-list :list="list"></detail-list>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import DetailBanner from "./Banner";
import DetailHeader from "./Header";
import DetailList from "./List";
export default {
  name: "Detail",
  components: {
    DetailBanner,
    DetailHeader,
    DetailList,
  },
  data() {
    return {
      sightname: "",
      bannerimg: "",
      bannergallary: [],
      list: [],
    }
  },
  methods: {
      getDetailInfo() {
          axios.get('/api/detail.json', {params: {id: this.$route.params.id}}).then(this.getDetailInfoSucc)
      },
      getDetailInfoSucc(res) {
          if(res.data.ret && res.data.data) {
              res = res.data.data
              this.sightname = res.sightName
              this.bannerimg = res.bannerImg
              this.bannergallary = res.gallaryImgs
              this.list = res.categoryList
          }
          console.log(res);

      }
  },
  mounted() {
      this.getDetailInfo()
  }
};
</script>

<style scoped>
.content {
  height: 20rem;
}
</style>